<template>
	<view class="index">
		<view class="top">
			<!-- <image src="@/static/images/dw.png" mode="" style="width: 40rpx;height: 40rpx;"></image> -->
			<text class="log">安住客</text>
			<!-- <u-search shape="" :show-action="false" v-model="keyword" placeholder="输入关键字搜索"></u-search> -->
			<input class="uni-input" maxlength="10" placeholder="安心挑好房,当然安住客" />
			<view class="location">
				<text class="city">成都</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="kefu">
				<u-icon name="kefu-ermai" color="#fff" size="24"></u-icon>
			</view>
		</view>
		<!-- 轮播 -->
		<!-- <u-swiper :list="bannerList" height="320rpx" autoplay></u-swiper> -->
		<!-- 菜单 -->
		<Menu></Menu>
		<!-- 推荐 -->
		<view class="recommend">
			<template>
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in listArr" :key="index">
						<view class="recommend_item">
							<view class="title">{{item.name}}</view>
							<view class="describe">{{item.describe}}</view>
						</view>
					</view>
				</u-scroll-list>
			</template>
		</view>
		<!-- 标签页 -->
		<u-tabs :list="list"  lineColor="#54AD84" :is-scroll="false"  :current="current" @change="change" lineWidth="30"
			:activeStyle="{
            color: '#54AD84',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 30px;"></u-tabs>

		<view class="container">

			<view class="list">

				<view class="list-item" v-for="baseListItem in goods">

					<image class="item-img" :src="baseListItem.faceUrl" mode="widthFix">
					</image>
					<view class="grid-text">
						<text
							style="font-weight: bold;">{{baseListItem.villageName }}</text>&emsp;&emsp;{{baseListItem.houseNum}}{{baseListItem.toiletNum}}
					</view>
					<view class="sell">
						房租：<text class="price" style="color: #FF9D0B	;">{{baseListItem.price}}元</text>
					</view>
				</view>

			</view>

		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	// import {
	// 	mapState
	// } from 'vuex'
	import Menu from './components/menu.vue'
	import api from '../../utils/api.js'
	export default {
		components: {
			Menu
		},
		data() {
			return {
				list: [{
					name: '个人转租',
				}, {
					name: '新房',
				}, {
					name: '二手房',
					describe: ''
				}, {
					name: '租房',
					describe: ''
				}],
				current: 0,
				baseList: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F267%2Fw640h427%2F20181022%2Fk9JX-hmuuiyv8445921.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667800598&t=b6c6003409804118bb153084a1a3f7f4'
				],
				pageNum: 1,
				goods: [],
				bannerList: [],
				isloading: false,
				city: '成都市',
				keyword: '',
				status: 'loadmore',
				total: 0,
				listArr: [{
					name: "特价房专区",
					describe: '好而不贵，特价好房源'
				}, {
					name: "三环至绕城间",
					describe: '三环指绕城区间的楼盘'
				}, {
					name: "房东",
					describe: '与房东直接交流'
				}, ]
			}
		},
		computed: {
			// ...mapState(['goods', 'bannerList'])
		},
		created() {
			// this.$store.dispatch('getIndex')
			this.getDate()
		},
		methods: {
			handclick() {
				console.log(this.$store.state)
			},
			change(evt) {
				this.current = evt.index
				this.page = 1
				this.goods = ''
				this.getDate()
			},
			getDate() {
				api.getIndexList().then(res => {
					console.log('res', res)
				}).catch(err => {
					console.log(err)
				})
				const param = {
					goods_id: '238',
					content: '真好用',
					rate: 1,
					star: 5,
				}
				api.setMsg(param).then(res => {
					console.log('res', res)
				}).catch(err => {
					console.log(err)
				})

			}
		},
		onReachBottom() {
			console.log('触发底部加载')
			if (this.goods.length === this.total) {
				this.status = 'nomore'
				return
			} else {
				this.status = 'loading'
				this.pageNum++
				this.getDate()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.index {
		.top {
			display: flex;
			align-items: center;
			padding: 10rpx;
			background-color: #60C696;
			position: relative;

			.log {
				width: 130rpx;
				font-size: 40rpx;
				color: #FFFFFF;
				margin: 0 20rpx;
				font-family: LiSu;
			}

			.uni-input {
				flex: 1;
				background-color: #fff;
				height: 60rpx;
				font-size: 24rpx;
				border-radius: 6rpx;
				padding-left: 150rpx;
			}

			.location {
				display: flex;
				position: absolute;
				font-size: 32rpx;
				width: 110rpx;
				left: 190rpx;
				border-right: 2rpx solid #F1F3F4;

				.city {
					padding-right: 10rpx;
				}
			}

			.kefu {
				padding: 0 30rpx;
			}
		}

		.recommend {
			.recommend_item {
				width: 400rpx;
				height: 300rpx;
				padding: 20rpx;
				background-color: #FAF8F5;
				margin: 5rpx;

				.title {
					font-size: 40rpx;
				}

				.describe {
					color: #A68D5C;
				}
			}
		}



		.container {
			.list {

				padding-top: 14rpx;

				column-count: 2;

				column-gap: 18rpx;

				margin-left: 20rpx;

				margin-right: 10rpx;

				.list-item {

					width: 330rpx;
					-webkit-column-break-inside: avoid;
					background: white;
					border-radius: 14rpx;
					margin-bottom: 20rpx;
					.item-img {
						width: 100%;
						border-radius: 14rpx;
					}
				}
			}
		}
	}

	.myswiper {
		image {
			width: 750rpx;
			height: 300rpx;
		}
	}
</style>
